window.onload = function() {
    let regionCheckBox = {
        'name': 'region',
        'option': ['华南', '华东', '华北']
    }
    let productCheckBox = {
        'name': 'product',
        'option': ['手机', '笔记本', '智能音箱']
    }
    generateCheckBox('region-radio-wrapper', regionCheckBox);
    generateCheckBox('product-radio-wrapper', productCheckBox);

    function generateCheckBox(containerId, checkBoxObj) {
        let checkBox = document.getElementById(containerId);
        let checkAll = document.createElement('input');
        checkAll.setAttribute('checkbox-type', 'all');
        checkAll.type = 'checkbox';
        checkAll.value = '全选';
        checkBox.appendChild(checkAll);
        checkBox.appendChild(document.createTextNode('全选'));
        let subCheckBox = [];
        for (let i = 0; i < checkBoxObj.option.length; i++) {
            let check = document.createElement('input');
            check.type = 'checkbox';
            check.value = checkBoxObj.option[i];
            subCheckBox.push(check);
            checkBox.appendChild(check);
            checkBox.appendChild(document.createTextNode(checkBoxObj.option[i]));
        }
        // 给容器做一个事件委托
        checkBox.addEventListener('click', function(event) {
            var event = event || window.event;
            var target = event.target;
            if (target.nodeName.toLowerCase() == 'input') {
                showData();

                if (target.value == '全选') {
                    console.log(subCheckBox)
                    if (target.checked === true) {
                        for (let i = 0; i < subCheckBox.length; i++) {
                            subCheckBox[i].checked = true;
                        }
                    }
                } else {
                    let count = 0;
                    for (let i = 0; i < subCheckBox.length; i++) {
                        if (subCheckBox[i].checked === true) {
                            count++;
                        }
                    }
                    if (count === 3) {
                        checkAll.checked = true;
                    } else if (count > 0) {
                        checkAll.checked = false;
                    }
                }
            }
        })
    }
    showData()

    function showData() {
        let regionWrapper = document.getElementById('region-radio-wrapper');
        let productWrapper = document.getElementById('product-radio-wrapper');
        let regionChildren = regionWrapper.children;
        let productChildren = productWrapper.children;
        let regionChecked = 0;
        let productChecked = 0;
        let regions = [];
        let products = [];

        for (let i = 1; i < regionChildren.length; i++) {
            if (regionChildren[i].checked === true) {
                regions.push(regionChildren[i].value);
                regionChecked++;
            }
        }
        for (let i = 1; i < productChildren.length; i++) {
            if (productChildren[i].checked === true) {
                products.push(productChildren[i].value);
                productChecked++;
            }
        }
        let data = getData(regions, products);
        addData(data);
        createTableHead(regions, products);
    }

    function addData(data) {
        console.log(data);
        let table = document.getElementsByTagName('table')[0];
        console.log(table);
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        td1.innerHTML = data.product;
        let td2 = document.createElement('td');
        td2.innerHTML = data.region;
        tr.appendChild(td1);
        tr.appendChild(td2);
        table.appendChild(tr);

    }

    function createTableHead(regions, products) {
        clearData();
        let div = document.getElementById('table');
        let table = document.createElement('table');
        table.style.borderCollapse = 'collapse';
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        td1.innerHTML = '商品';
        tr.appendChild(td1);
        let td2 = document.createElement('td');
        td2.innerHTML = '地区';
        tr.appendChild(td2);
        td1.style.border = '1px solid #000000';
        td2.style.border = '1px solid #000000';
        addMonthHead(tr);
        if (products.length === 1 && regions.length === 1) {

        } else if (regions.length === 1 && products.length > 1) {

        } else if (regions.length > 1 && products.length === 1) {

        } else {

        }
        table.appendChild(tr);
        div.appendChild(table);
    }

    function addMonthHead(tr) {
        let div = document.getElementById('table');
        let table = document.createElement('table');
        for (let i = 1; i <= 12; i++) {
            let td = document.createElement('td');
            td.innerHTML = i + '月';
            td.style.border = '1px solid #000000';
            tr.appendChild(td);
        }
        table.appendChild(tr);
        div.appendChild(table);
    }

    function getData(regions, products) {
        let result = [];
        for (let i = 0; i < regions.length; i++) {
            for (let j = 0; j < products.length; j++) {
                for (let k = 0; k < sourceData.length; k++) {
                    if (sourceData[k].region == regions[i] && sourceData[k].product == products[j]) {
                        result.push(sourceData[k]);
                    }
                }
            }
        }
        return result;
    }

    function clearData() {
        let table = document.getElementById('table');
        while (table.hasChildNodes()) {
            table.removeChild(table.firstChild);
        }
    }


}